<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤计算属性实现</title>
    <script src="../js/vue.js"></script>
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" placeholder="请输入搜素关键字" v-model="keyword">
    <table>
        <tr>
            <th>序号</th>
            <th>英雄</th>
            <th>能量值</th>
            <th>选择</th>
        </tr>
        <tr v-for="(hero,index) in filteredHeros" :key="hero.id">
            <td>{{index+1}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.power}}</td>
            <td><input type="checkbox"></td>
        </tr>
    </table>
</div>


<script>

    const vm = new Vue({
        el: '#app',
        data: {
            keyword: '',
            msg: '列表过滤',
            heros: [
                {id: '101', name: '艾格夫', power: 1000},
                {id: '102', name: '麦迪文', power: 6000},
                {id: '103', name: '吉尔丹', power: 8000},
                {id: '104', name: '萨尔', power: 6000}
            ]

        },
        computed: {
            filteredHeros() {
                // 执行过滤
                return this.heros.filter((hero) => {
                    return hero.name.indexOf(this.keyword) >= 0
                })
            }
        }
    })
</script>
</body>
</html>